<template>
  <view>
    <view class="page">
      <view class="section_1">
        <view class="group_26">
          <view class="group_2">
            <view class="group_27">
              <view class="text-1">
                <text lines="1" class="text_1">{{pending_my||0}}</text>
                <view lines="1" class="text_3">待我处理</view>
              </view>
              <view class="text_img">
                <image
                  src="https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/1.png?sign=8ce8ac73f6fa8c162271c6970d5016a9&t=1659406265"
                  class="image_5"></image>
              </view>
              <view class="text-1">
                <text lines="1" class="text_2">{{pending_he||0}}</text>
                <view lines="1" class="text_4">待他人处理</view>
              </view>

            </view>
            <view class="button_1">
              <text lines="1" class="text_5" @click="toInitiate()">从聊天文件发起签署</text>
            </view>
          </view>
        </view>
      </view>
      <view class="section_5">
        <text lines="1" class="text_6">最近文件</text>
        <view class="group_3">

          <view v-for="(file,index) in fileInfo.list" :key="file.checkFileId">
            <view class="group_28">
              <view class="image-wrapper_1" @click="toMyFile(file)">
                <image
                  src="https://636c-cloud1-4ge04zyie85f8672-1311921377.tcb.qcloud.la/wj.png?sign=2d8d1804c3afd4bc910764a2afa3939c&t=1659406716"
                  class="label_3"></image>
              </view>
              <view class="text-wrapper_2">
                <text lines="1" class="paragraph_1" @click="toMyFile(file)">{{file.fileName.split('.')[0]}}<br /></text>
                <view class="text_faqi_time">
                  <text lines="1" decode="true"
                    class="text_7">{{file.sysUser.name}}&nbsp;&nbsp;|&nbsp;&nbsp;{{file.signatorName.split(',')[0]}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
                  <text class="text_8">{{file.createTime.slice(0,10)}}</text>
                </view>
              </view>
              <view class="button_2" v-if="file.status==1">
                <text class="text_9" @click="toMyFileInfo(file)">待我签</text>
              </view>
              <view class="button_2" v-if="file.status==2">
                <text class="text_9" @click="toMyFileInfo(file)">待他签</text>
              </view>
              <view class="tag_1" v-if="file.status==3">
                <text class="text_15" @click="toCompleted(file)">已完成</text>
              </view>
              <view class="button_4" v-if="file.status==4">
                <navigator url="/subpkg/file-accomplish/file-accomplish" class="text_18">已逾期</navigator>
              </view>
              <view class="button_4" v-if="file.status==5">
                <navigator url="/subpkg/file-accomplish/file-accomplish" class="text_18">待仲裁</navigator>
              </view>
              <view class="button_4" v-if="file.status==6">
                <navigator url="/subpkg/file-accomplish/file-accomplish" class="text_18">已作废</navigator>
              </view>

            </view>
            <view class="group_29">
              <view class="box_2"></view>
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {

      }
    },
    onLoad() {
      this.getContractInfo()
    },
    methods: {
      toInitiate(){
        uni.removeStorageSync('signUserList')
        uni.navigateTo({
          url:"/subpkg/initiate-sign/initiate-sign"
        })
      },
      toCompleted(file) {
        uni.setStorageSync('file', file)
        uni.navigateTo({
          url: '/subpkg/file-accomplish/file-accomplish'
        })
      },
      toMyFile(file) {
        //进行本地存储
        uni.setStorageSync('file', file)
        uni.navigateTo({
          url: '/subpkg/sign-process/sign-process'
        })
      },
      //获取合同
      getContractInfo() {
        this.$store.dispatch('contract/getContractInfo')
      },
      //待我签
      toMyFileInfo(file) {
        //进行本地存储
        uni.setStorageSync('file', file)
        uni.navigateTo({
          url: '/subpkg/my-file-contract/my-file-contract'
        })
      }
    },
    computed: {
      //计算全部合同文件
      ...mapState({
        fileInfo: state => state.contract.fileInfo,
      }),
      //计算待我处理
      pending_my() {
        let num = 0
        if (!this.fileInfo.list) return
        this.fileInfo.list.forEach((item, index) => {
          if (item.status == 1) {
            num++
          }
        })
        return num
      },
      //计算待他处理
      pending_he() {
        let num = 0
        if (!this.fileInfo.list) return
        this.fileInfo.list.forEach((item, index) => {
          if (item.status == 2) {
            num++
          }
        })
        return num
      }
    },
    watch: {}
  }
</script>

<style>
  .text_img{
    margin: 0 30px;
  }
  .text-1 {
    text-align: center;
  }

  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1478rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .section_1 {
    background-image: linear-gradient(180deg, rgba(62, 72, 85, 1.000000) 0, rgba(62, 72, 85, 1.000000) 0, rgba(24, 26, 30, 1.000000) 100.000000%, rgba(24, 26, 30, 1.000000) 100.000000%);
    height: 375rpx;
    width: 750rpx;
    display: flex;
    flex-direction: column;
  }

  .group_26 {
    width: 570rpx;
    height: 361rpx;
    display: flex;
    flex-direction: row;
    margin: 22rpx 0 2rpx 90rpx;
  }

  .group_2 {
    background-color: rgba(69, 72, 85, 0.250000);
    width: 570rpx;
    display: flex;
    flex-direction: column;
  }

  .group_27 {
    height: 57rpx;
    display: flex;
    align-items: center;
    margin: 48rpx auto 0 auto;

  }

  .text_1 {
    /* width: 33rpx; */
  
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 72rpx;
    font-family: Adobe Heiti Std R;

  }

  .image_5 {
    width: 1rpx;
    height: 48rpx;
    /* margin: 7rpx 0 0 94rpx; */
  }

  .text_2 {
    /* width: 36rpx; */
    height: 57rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 72rpx;
 
  
  }

  .text_3 {
    width: 123rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
  }

  .text_4 {
    width: 154rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
  }

  .button_1 {
    background-color: rgba(69, 72, 85, 1.000000);
    border-radius: 20rpx;
    height: 64rpx;
    border: 2px solid rgba(255, 255, 255, 1);
    display: flex;
    flex-direction: column;
    width: 284rpx;
    margin: 142rpx 0 67rpx 142rpx;
  }

  .text_5 {
    color: rgba(255, 255, 255, 1);
    font-size: 24rpx;
    /* margin: 17rpx 0 0 33rpx; */
    text-align: center;
    margin: 10rpx 0;
  }

  .section_5 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 750rpx;
    height: 1334rpx;
    margin-top: -2rpx;
    display: flex;
    flex-direction: column;
  }

  .text_6 {
    width: 146rpx;
    height: 34rpx;
    overflow-wrap: break-word;
    color: rgba(32, 32, 32, 1);
    font-size: 36rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 36rpx 0 0 29rpx;
  }

  .group_3 {
    background-color: rgba(255, 255, 255, 1.000000);
    height: auto;
    width: 750rpx;
    display: flex;
    flex-direction: column;
    margin: 14rpx 0 69rpx 0;
    overflow-x: hidden;
  }

  .group_28 {
    width: 690rpx;
    height: 81rpx;
    flex-direction: row;
    display: flex;
    margin: 18rpx 0 0 30rpx;
  }

  .image-wrapper_1 {
    background-image: linear-gradient(180deg, rgba(233, 219, 184, 1.000000) 0, rgba(233, 219, 184, 1.000000) 0, rgba(196, 176, 129, 1.000000) 100.000000%, rgba(196, 176, 129, 1.000000) 100.000000%);
    border-radius: 5rpx;
    height: 67rpx;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    width: 67rpx;
  }

  .label_3 {
    width: 35rpx;
    height: 29rpx;
    margin: 19rpx 0 0 15rpx;
  }

  .text-wrapper_2 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    line-height: 69rpx;
    margin-left: 31rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .text_faqi_time {
    display: flex;
  }

  .paragraph_1 {
    width: 365rpx;
    height: 81rpx;
    overflow: hidden;
    /* overflow-wrap: break-word; */
    color: rgba(27, 27, 27, 1);
    font-size: 30rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 69rpx;
    margin-bottom: -25rpx;
    margin-top: -15rpx;
  }

  .text_7 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(125, 125, 125, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 48rpx;
    margin-right: -110rpx;
  }

  .text_8 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 48rpx;
  }

  .button_2 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 28rpx;
    height: 61rpx;
    border: 2px solid rgba(198, 177, 130, 1);
    display: flex;
    flex-direction: column;
    width: 156rpx;
    margin: 12rpx 0 0 71rpx;
  }

  .text_9 {
    width: 88rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(201, 180, 135, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    margin: 13rpx 0 0 34rpx;
  }

  .group_29 {
    width: 621rpx;
    height: 2rpx;
    display: flex;
    flex-direction: row;
    margin: 26rpx 0 0 129rpx;
  }

  .box_2 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 621rpx;
    height: 2rpx;
    display: flex;
    flex-direction: column;
  }

  .group_30 {
    width: 690rpx;
    height: 81rpx;
    flex-direction: row;
    display: flex;
    margin: 26rpx 0 0 30rpx;
  }

  .image-wrapper_2 {
    background-image: linear-gradient(180deg, rgba(233, 219, 184, 1.000000) 0, rgba(233, 219, 184, 1.000000) 0, rgba(196, 176, 129, 1.000000) 100.000000%, rgba(196, 176, 129, 1.000000) 100.000000%);
    border-radius: 5rpx;
    height: 67rpx;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    width: 67rpx;
  }

  .label_4 {
    width: 35rpx;
    height: 29rpx;
    margin: 19rpx 0 0 15rpx;
  }

  .text-wrapper_3 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    line-height: 69rpx;
    margin-left: 31rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .paragraph_2 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(27, 27, 27, 1);
    font-size: 30rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 69rpx;
    margin-bottom: -25rpx;
    margin-top: -15rpx;
  }

  .text_10 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(125, 125, 125, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 48rpx;
    margin-right: -110rpx;
  }

  .text_11 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 48rpx;
  }

  .button_3 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 28rpx;
    height: 61rpx;
    border: 2px solid rgba(198, 177, 130, 1);
    display: flex;
    flex-direction: column;
    width: 156rpx;
    margin: 12rpx 0 0 71rpx;
  }

  .text_12 {
    width: 88rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(201, 180, 135, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    margin: 13rpx 0 0 34rpx;
  }

  .group_31 {
    width: 621rpx;
    height: 2rpx;
    display: flex;
    flex-direction: row;
    margin: 34rpx 0 0 129rpx;
  }

  .group_4 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 621rpx;
    height: 2rpx;
    display: flex;
    flex-direction: column;
  }

  .group_32 {
    width: 688rpx;
    height: 81rpx;
    flex-direction: row;
    display: flex;
    margin: 26rpx 0 0 29rpx;
  }

  .image-wrapper_3 {
    background-image: linear-gradient(180deg, rgba(233, 219, 184, 1.000000) 0, rgba(233, 219, 184, 1.000000) 0, rgba(196, 176, 129, 1.000000) 100.000000%, rgba(196, 176, 129, 1.000000) 100.000000%);
    border-radius: 5rpx;
    height: 67rpx;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    width: 67rpx;
  }

  .label_5 {
    width: 35rpx;
    height: 29rpx;
    margin: 19rpx 0 0 15rpx;
  }

  .text-wrapper_4 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    line-height: 69rpx;
    margin-left: 31rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .paragraph_3 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(27, 27, 27, 1);
    font-size: 30rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 69rpx;
    margin-bottom: -25rpx;
    margin-top: -15rpx;
  }

  .text_13 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(125, 125, 125, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 48rpx;
    margin-right: -110rpx;
  }

  .text_14 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 48rpx;
  }

  .tag_1 {
    background-color: rgba(94, 91, 88, 1.000000);
    border-radius: 28rpx;
    height: 57rpx;
    display: flex;
    flex-direction: column;
    width: 152rpx;
    margin: 14rpx 0 0 73rpx;
  }

  .text_15 {
    width: 86rpx;
    height: 29rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    margin: 11rpx 0 0 34rpx;
  }

  .group_33 {
    width: 621rpx;
    height: 2rpx;
    display: flex;
    flex-direction: row;
    margin: 38rpx 0 0 129rpx;
  }

  .section_12 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 621rpx;
    height: 2rpx;
    display: flex;
    flex-direction: column;
  }

  .group_34 {
    width: 690rpx;
    height: 81rpx;
    flex-direction: row;
    display: flex;
    margin: 34rpx 0 33rpx 30rpx;
  }

  .image-wrapper_4 {
    background-image: linear-gradient(180deg, rgba(233, 219, 184, 1.000000) 0, rgba(233, 219, 184, 1.000000) 0, rgba(196, 176, 129, 1.000000) 100.000000%, rgba(196, 176, 129, 1.000000) 100.000000%);
    border-radius: 5rpx;
    height: 67rpx;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    width: 67rpx;
  }

  .label_6 {
    width: 35rpx;
    height: 29rpx;
    margin: 19rpx 0 0 15rpx;
  }

  .text-wrapper_5 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    line-height: 69rpx;
    margin-left: 31rpx;
    display: flex;
    flex-wrap: wrap;
  }

  .paragraph_4 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(27, 27, 27, 1);
    font-size: 30rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 69rpx;
    margin-bottom: -25rpx;
    margin-top: -15rpx;
  }

  .text_16 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(125, 125, 125, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 48rpx;
    margin-right: -110rpx;
  }

  .text_17 {
    width: 365rpx;
    height: 81rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 24rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    line-height: 48rpx;

  }

  .button_4 {
    background-color: rgba(255, 255, 255, 1.000000);
    border-radius: 28rpx;
    height: 61rpx;
    border: 2px solid rgba(27, 27, 27, 1);
    display: flex;
    flex-direction: column;
    width: 156rpx;
    margin: 12rpx 0 0 71rpx;
  }

  .text_18 {
    width: 86rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(27, 27, 27, 1);
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    margin: 14rpx 0 0 36rpx;
  }
</style>
